<template>
  <div class="price">
    <div class="item">
      <div class="title">bacads ERP 使用价格说明</div>
      <div class="secondary-title">对初创团队提供最大扶持, 我们与你共同进步.</div>
      <div class="price-table">
        <table>
          <col width="200" />
          <col width="320" />
          <col width="720" />
          <tr>
            <th></th>
            <th>
              <div class="version">免费版</div>
              <p>扶持初创团队</p>
            </th>
            <th>
              <div class="version">批发版</div>
              <p>一次性购买订单包, 有效时间 2年.</p>
            </th>
          </tr>
          <tr class="height">
            <td rowspan="2" style="font-size: 24px;font-weight: 700;color: black;font-family: 'MyFont2', sans-serif;">价格</td>
            <td>
              <div class="blue">¥ 0</div>
              <div class="black">5000 单/月</div>
            </td>
            <td>
              <div class="sq">
                <div>
                  <div class="blue">¥ 6000</div>
                  <div class="black">8W 单</div>
                </div>
                <div>
                  <div class="blue">¥ 11000</div>
                  <div class="black">20W 单</div>
                </div>
                <div>
                  <div class="blue">¥ 20000</div>
                  <div class="black">50W 单</div>
                </div>
                <div>
                  <div class="blue">¥ 35000</div>
                  <div class="black">100W 单</div>
                </div>
              </div>
            </td>
          </tr>
          <tr class="height">
            <td class="grey">¥ 0</td>
            <td>
              <div class="item-price">
                <div class="grey">¥ 0.075</div>
                <div class="grey">¥ 0.055</div>
                <div class="grey">¥ 0.040</div>
                <div class="grey">¥ 0.035</div>
              </div>
            </td>
          </tr>
          <tr>
            <td class="txt">新品管理</td>
            <td class="green">✓</td>
            <td class="green">✓</td>
          </tr>
          <tr>
            <td class="txt">产品管理</td>
            <td class="green">✓</td>
            <td class="green">✓</td>
          </tr>
          <tr>
            <td class="txt">广告管理</td>
            <td class="green">✓</td>
            <td class="green">✓</td>
          </tr>
          <tr>
            <td class="txt">财务管理</td>
            <td class="green">✓</td>
            <td class="green">✓</td>
          </tr>
          <tr>
            <td class="txt">权限管理</td>
            <td class="green">✓</td>
            <td class="green">✓</td>
          </tr>
          <tr>
            <td class="txt">售后保障</td>
            <td style="font-size: 24px;font-weight: 700;color: black;">-</td>
            <td style="font-size: 16px; color: #515151;">工作日售后支持, 60天无理由退款.</td>
          </tr>
        </table>
      </div>
    </div>
    <div class="item">
      <div class="title">bacads 仓库服务价格说明</div>
      <div class="tip">先使用, 按月结账.</div>
      <div class="funtion-table">
        <table>
          <col width="360" />
          <col width="740" />
          <tr>
            <td class="txt">测样</td>
            <td class="describe">10 元 / SKU, 并输出样品报告.</td>
          </tr>
          <tr>
            <td class="txt">FBA</td>
            <td class="describe">0.1 元 / PCS, 质检 & 头程装箱服务</td>
          </tr>
          <tr>
            <td class="txt">FBM</td>
            <td class="describe">2 元 / 订单 , 质检 & 订单发货</td>
          </tr>
          <tr>
            <td class="txt">长期仓储费</td>
            <td class="describe">超90天, 每PCS 收取 0.1 元/ 每月</td>
          </tr>
          <tr>
            <td class="txt">销毁费</td>
            <td class="describe">2 元/ SKU.</td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.price {
  margin: auto;
  color: #2F84B9;
}

.item {
  width: 1700px;
  margin: auto;
  text-align: center;

  .title {
    margin: 70px;
  }
}

.price-table {
  width: 1240px;
  margin: auto;

  th {
    height: 145px;
  }

  tr {
    height: 60px;
  }

  td {
    padding: 0;
  }
}

.title {
  font-size: 42px;
  font-family: 'MyFont2', sans-serif;
}

.secondary-title {
  font-size: 16px;
  margin: 50px;
}

.tip {
  font-size: 20px;
  color: red;
  font-family: 'MyFont2', sans-serif;

}

table {
  border-collapse: collapse;
  border: 1px solid #979797;
}

table td,
table th {
  border: 1px solid #979797;
}

.green {
  color: #06C100;
  font-size: 24px;
  font-weight: 700;
}

.txt {
  color: #656565;
  font-size: 15px;
  font-weight: 700;
}

.sq {
  display: flex;
  justify-content: space-evenly;
}

.item-price {
  display: flex;
  justify-content: space-evenly;
}

.price-table .height {
  height: 74px;
}

.price-table .version {
  font-size: 32px;
  font-family: 'MyFont2', sans-serif;
  color: black;
  line-height: 52px;
}

.price-table p {
  color: red;
  font-weight: 700;
  line-height: 20px;
  margin: 10px;
}

.grey {
  color: #656565;
  font-weight: 700;
  font-size: 15px;
}

.black {
  color: #000000;
  font-weight: 700;
  margin: 5px 0;
  font-size: 15px;
}

.blue {
  color: #2F84B9;
  font-weight: 700;
  margin: 5px 0;
  font-size: 15px;
}

/* 仓库服务表格 */
.funtion-table{
  width: 1100px;
  margin: auto;
  margin-bottom: 220px;
  margin-top: 20px;
  td{
    height: 110px;
    font-weight: 700;
  }
  .describe{
    font-size: 24px;
    line-height: 34px;
    color: #515151;
  }
  .txt{
    color: #0761BA;
    font-size: 32px;
    line-height: 60px;
    font-family: 'MyFont2', sans-serif;
  }
}
</style>